<template>
	<view class="page page-fill">
		<view class="linearBg"></view>
		<view class="bookList">
			<view v-for="(item,index) in booklist" :key="index" class="book-item" @tap="gotobookdetail(item)">
				<himg class="book-img" :src="item.picUrl" errorSrc="https://images-cdn.shimo.im/H4AX9SIW6W4xGH0M/noimg.jpg__thumbnail"></himg>
				<view class="book-info">
					<view class="book-title ellipsis">{{item.bookName}}</view>
					<view class="book-author ellipsis">{{item.authorName}} | {{item.catName}} | {{item.status==0?'连载':'完结'}}</view>
					<view >
						<p v-html="item.bookDesc" class="book-desp ellipsis2"></p>
					</view>
				</view>
			</view> 
		</view>
		<nodata v-show="!booklist.length"></nodata>
	</view>
</template>

<script>
	import nodata from '../../components/nodata/nodata.vue'
	export default {
		components:{
			nodata
		},
		data() {
			return {
				booklist:[],
			}
		},
		onNavigationBarButtonTap(val) {
			if(val.float == "right"){
				this.clearall();
			}
		},
		onShow() {
			var mysjbook =  uni.getStorageSync("mybooklist");
			if(mysjbook == null || mysjbook =="" || mysjbook == undefined){
				this.boolist = [];
			}else{
				this.booklist = mysjbook;
			}
		},
		methods: {
			removebook(fid){
				var me = this;
				var mysjbook = me.booklist;
				for(let i = 0;i<mysjbook.length;i++){
					let cid = mysjbook[i].id;
					if(fid == cid){
						mysjbook.splice(i,1);
						break;
					}
				}
				uni.setStorageSync("mybooklist",mysjbook); 
			},
			gotobookdetail(f){
				uni.navigateTo({
					url:'../bookdetail/bookdetail?fictionid='+f.id+'&title='+f.bookName
				})
			},
			clearall(){
				this.bookList = [];
				uni.removeStorageSync("mybooklist");
				uni.removeStorageSync("cachebookchapter");
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/bookList.scss';

.page{
	position: relative;
	.linearBg{
		width: 100%;
		height: 420rpx;
		background: linear-gradient(180deg, #fff 0%, rgba(250,250,250,0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
}
</style>
